<template>
  <div class="container">
    <div class="weui_cells_title">住院号：</div>
    <div class="weui_cells weui_cells_access" style="margin-top:10px;">
      <div class="weui_cell">
        <div class="weui_cell_hd">
          <i class="fa fa-credit-card-alt fa-2x icon-color" style="width:45px;margin-right:5px;display:block;"></i>
        </div>
        <div class="weui_cell_bd weui_cell_primary">
          <p>{{ward?ward.name:''}}</p>
          <p>{{ward?ward.num:''}}</p>
        </div>
      </div>
    </div>
    <div class="weui_cells_title" v-show="showEmpty">{{emptyMsg}}</div>
    <div v-show="!showEmpty">
      <div class="weui_cells_title" style="font-size:17px;">
        <p> 清单日期：<span style="margin-right:10px;" class="info">{{billDate}}</span></p>
        <p> 总金额：<span class="info">{{feeAmt}} 元</span></p>
      </div>
      <div v-for="item in feeDetails">
        <div class="weui_cells_title" style="font-size:17px;">
        </div>
        <div class="weui_cells weui_cells_access" style="margin-top:10px;">
          <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
              <p>
                <span style="display: block;">费用类型：<span style="color: #0ae;">{{item.feeType}}</span></span>
                <span style="display: block;">收费项目：<span style="color: #0ae;">{{item.feeName}}</span></span>
                <span style="display: block;">规格：<span style="color: #0ae;">{{item.spec}}</span></span>
                <span style="display: block;width: 100%;">
                  <span style="display: inline-block;width: 50%;float: left;">数量：<span style="color: #0ae;">{{item.qty}}</span></span>
                <span style="display: inline-block;width: 50%;float: left;">单位：<span style="color: #0ae;">{{item.unit}}</span></span>
                </span>
                <span style="display: block;width: 100%;">
                  <span style="display: inline-block;width: 50%;float: left;">单价：<span style="color: #0ae;">{{item.price}} 元</span></span>
                <span style="display: inline-block;width: 50%;float: left;">小计：<span style="color: #0ae;">{{item.amt}} 元</span></span>
                </span>
                <span style="display: block;">费用状态：<span style="color: #0ae;">{{item.feeState}}</span></span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <partial name="footer-copyright"></partial>
  </div>
</template>
<style scoped>
.blue_tag {
  background-color: #0ae;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.orange_tag {
  background-color: #ff8208;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

span.label {
  display: inline-block;
  width: 100px;
}

span.info {
  color: #0ae;
}
</style>
<script>
import _ from 'underscore'

export default {
  name: 'GetInpatientBillView',
  data: function () {
    return {
      showEmpty: false,
      emptyMsg: '',

      billDate: '',
      flowNo: '',
      feeAmt: '',
      feeDetails: []
    }
  },
  vuex: {
    getters: {
      ward: ({ ward }) => _.findWhere(ward.wards, { isSelected: true })
    }
  },
  methods: {
    getInpatientBill: function () {
      var self = this

      this.$ajax.get('GetDailyBill', 'Inpatient', {
        flowNo: this.flowNo,
        billDate: this.billDate
      }).then(function (data) {
        if (data.ResultCode !== '0') {
          self.showEmpty = true
          self.emptyMsg = data.ResultMsg
        } else {
          self.feeDetails = _.map(data.WardFeeDetailList, function (val) {
            return {
              feeType: val.FeeType,
              feeName: val.FeeName,
              price: val.Price,
              spec: val.Spec,
              unit: val.Unit,
              qty: val.Qty,
              amt: val.Amt,
              feeState: val.FeeState
            }
          })
        }
      })
    }
  },
  ready: function () {
    this.billDate = this.$route.query.billDate
    this.flowNo = this.$route.query.flowNo
    this.feeAmt = this.$route.query.feeAmt

    this.$watch('ward', function (val) {
      this.getInpatientBill()
    })

    this.getInpatientBill()
  }
}
</script>
